<script setup>
import { ref, reactive, onMounted } from "vue"
import { getChannelAPI, getChannelByIdAPI, saveChannelAPI, updateChannelAPI } from "@/api"
import msgUtils from "@/utils/message"

onMounted(async () => {
  getCahnnelList()
})
//频道列表参数
const channelParams = reactive({
  page: 1,
  pageSize: 2,
  name: "",
  status: 1
})
const total = ref(0)
// 频道数据
const channelList = ref([])
//获取频道数据
const getCahnnelList = async () => {
  try {
    const res = await getChannelAPI(channelParams)
    if (res.code === 200) {
      channelList.value = res.data.rows
      total.value = res.data.total
    }
  } catch (error) {
    msgUtils(error, "error")
  }
}
//分页
const pageChange = (page) => {
  channelParams.page = page
  getCahnnelList()
}
//条件查询
const changeParamsGetChannel = (data, type) => {
  channelParams[type] = data
  getCahnnelList()
}

const dialogVisible = ref(false)
const addAndEditParams = ref({
  id: null,
  name: "",
  description: "",
  status: 1,
  ord: 1
})

//根据id查询频道
const editChannel = async (id) => {
  try {
    const res = await getChannelByIdAPI(id)
    dialogVisible.value = true
    if (res.code === 200) {
      addAndEditParams.value = res.data
    } else {
      msgUtils("查询失败", "error")
    }
  } catch (err) {
    console.log(err);
  }
}

const closeDialog = () => {
  dialogVisible.value = false
  addAndEditParams.value = {
    id: null,
    name: "",
    description: "",
    status: 1,
    ord: 1
  }
}

//新增编辑频道
const operateChannel = async () => {
  if (addAndEditParams.value.id) {
    //编辑
    try {
      const res = await updateChannelAPI(addAndEditParams.value)
      if (res.code === 200) {
        msgUtils("更新频道成功")
        dialogVisible.value = false
      }
    } catch (err) {
      console.log(err);
    }
  } else {
    //新增
    try {
      const res = await saveChannelAPI(addAndEditParams.value)
      if (res.code === 200) {
        msgUtils("新增频道成功")
        getCahnnelList()
        dialogVisible.value = false
      }
    } catch (err) {
      console.log(err);
    }
  }
}

const updateChannelType = async(id, status) => {
  try {
    const res = updateChannelAPI({id, status})
    if(res.code === 200) {
      status ? msgUtils("启用成功") : msgUtils("禁用成功")
    }
  } catch (err) {
    console.log(err);
  }
}


</script>
<template>
  <div class="channel-container">
    <el-card>
      <div class="aa">
        <el-form size="large" :inline="true" :model="channelParams" class="demo-form-inline">
          <el-form-item label="频道名称">
            <el-input v-model="channelParams.name" placeholder="请输入频道名称"
              @input="changeParamsGetChannel($event, 'name')" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="channelParams.status" style="width: 200px"
              @change="changeParamsGetChannel($event, 'status')">
              <el-option label="全部" selected :value="-1" />
              <el-option label="启用" :value="1" />
              <el-option label="禁用" :value="0" />
            </el-select>
          </el-form-item>
        </el-form>
        <el-button type="primary" size="large" icon="Plus" @click="dialogVisible = true">新增频道</el-button>
      </div>
    </el-card>

    <el-card>
      <el-table :data="channelList" style="width: 100%">
        <el-table-column type="index" label="序号" width="120"></el-table-column>
        <el-table-column prop="name" label="频道名称" width="180"></el-table-column>
        <el-table-column prop="description" label="描述" width="180"></el-table-column>
        <el-table-column prop="isDefault" label="是否默认频道" width="180"></el-table-column>
        <el-table-column prop="status" label="状态" width="180"></el-table-column>
        <el-table-column prop="ord" label="排序" width="180"></el-table-column>
        <el-table-column prop="createdTime" label="创建时间" width="180"></el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button size="small" @click="editChannel(row.id)">编辑</el-button>
            <el-button size="small" @click="updateChannelType(row.id, 1)">启用</el-button>
            <el-button size="small" @click="updateChannelType(row.id, 0)">禁用</el-button>
            <!-- 删除确认弹框 -->
            <el-popconfirm title="是否确认删除?" @confirm="confirmDel" @cancel="cancelDel" confirm-button-text="Yes"
              cancel-button-text="No">
              <template #reference>
                <el-button size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增编辑弹窗 -->
    <el-dialog v-model="dialogVisible" width="40%" center :title="addAndEditParams.id ? '编辑频道' : '新增频道'"
      :before-close="closeDialog">
      <el-form :model="addAndEditParams">
        <el-form-item label="频道名称:" label-width="100px">
          <el-input v-model="addAndEditParams.name" size="large" width="200px" maxlength="10" show-word-limit />
        </el-form-item>
        <el-form-item label="频道描述:" label-width="100px">
          <el-input v-model="addAndEditParams.description" size="large" width="200px" maxlength="16" show-word-limit />
        </el-form-item>
        <el-form-item label="是否启动:" label-width="100px">
          <el-radio-group v-model="addAndEditParams.status">
            <el-radio :label="1">启动</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序:" label-width="100px">
          <el-input-number v-model="addAndEditParams.ord" size="large" :min="1" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="operateChannel">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-pagination size="large" background layout="prev, pager, next" :page-size="channelParams.pageSize" :total="total"
      @current-change="pageChange" />
  </div>
</template>


<style lang="scss" scoped>
.aa {
  display: flex;
  justify-content: space-between;
}
</style>